<template>
  <el-dialog center title="添加包件" :visible.sync="innerVisible" width="800px">
    <div class="row">
      <el-row>
        <el-tag
          v-for="tag in selectedRow"
          :key="tag.packageId"
          closable
          @close="closeTag(tag, $event)"
        >
          {{tag.packageName}}
        </el-tag>
      </el-row>
      <el-row>
        <el-form ref="searchForm" class="el-form-col el-form-s" :model="search" label-position="left" label-width="100px">
          <el-row :gutter="15">
            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="locationId" label="库位搜索">
                <select-position v-model="search.locationId" placeholder=""></select-position>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="packageCode" label="包件编号">
                <el-input clearable placeholder="" v-model.trim="search.packageCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="packageName" label="包件名称">
                <el-input clearable placeholder="" v-model.trim="search.packageName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="productNo" label="产品编号">
                <el-input clearable placeholder="" v-model.trim="search.productNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item prop="productName" label="产品名称">
                <el-input clearable placeholder="" v-model.trim="search.productName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--<el-button type="primary" @click.prevent="searchFunc">搜索</el-button>-->
              <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc"><span>搜索</span></el-button>
              <el-button type="primary" @click.prevent="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-row>
        <el-table
          border
          ref="elTable"
          max-height="800"
          :data="tableData"
          @selection-change="selectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            min-width="130"
            prop="locationAvailableNum"
            label="在库包件数量">
          </el-table-column>
          <el-table-column
            prop="packageCode"
            min-width="130"
            label="包件编号">
          </el-table-column>
          <el-table-column
            prop="packageName"
            min-width="200"
            label="包件名称">
          </el-table-column>
          <el-table-column
            prop="productNo"
            min-width="130"
            label="产品编号">
          </el-table-column>
          <el-table-column
            prop="productName"
            min-width="300"
            label="所属产品">
          </el-table-column>
          <el-table-column
            prop="cargoOwnerName"
            label="商家名称">
          </el-table-column>
          <el-table-column
            min-width="200"
            prop="locationAddress"
            label="现有库位">
          </el-table-column>
        </el-table>
        <div>
          <Pagination class="pull-right" :page.sync="params.pageNum" :perItem="params.pageSize" :totalItem="totalItem" @pagination="selectPage" @sizeChange="handleSizeChange"></Pagination>
        </div>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.prevent="submit" type="primary">添加</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Pagination from '@/components/Pagination'
import {merge, alert} from '@/utils'
import SelectPosition from '@/views/oms/business/SelectPosition'
export default {
  components: {
    Pagination,
    SelectPosition
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default() {
        return []
      }
    },
    cargoOwnerId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      params: {
        pageSize: 5,
        pageNum: 1
      },
      search: {
        locationId: '',
        packageCode: '',
        packageName: '',
        productNo: '',
        productName: ''
      },
      totalItem: 0,
      searchLoading: false,
      tableData: [],
      tableDataMap: new Map(),
      tableSelectedMap: new Map(),
      selectedRow: this.value,
      httpLoading: false
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.innerVisible = val
      this.params = {
        pageSize: this.params.pageSize,
        pageNum: 1,
        cargoOwnerId: this.cargoOwnerId
      }
      if (val) {
        if (this.$refs.searchForm) {
          this.$refs.searchForm.resetFields()
          this.tableData = []
        }
        this.tableSelectedMap = new Map()
        this.selectedRow = this.value
        // this.httpGetPackage()
      }
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  methods: {
    // 选中
    selectionChange(selection) {
      let selectionMap = new Map()
      selection.forEach(v => {
        this.tableSelectedMap.set(v.packageId, v)
        selectionMap.set(v.packageId, v)
        // 加上其他的
      })
      this.tableData.forEach(v => {
        if (!selectionMap.has(v.packageId)) {
          if (this.tableSelectedMap.has(v.packageId) && !this.httpLoading) {
            this.tableSelectedMap.delete(v.packageId)
          }
        }
      })
      if (!this.httpLoading) {
        this.selectedRow = [...this.tableSelectedMap.values()]
      }
    },
    // 关闭标签页
    closeTag(item) {
      if (this.tableSelectedMap.has(item.packageId)) {
        this.tableSelectedMap.delete(item.packageId)
      }
      // 反选table
      this.tableData.forEach((v, index) => {
        if (v.packageId === item.packageId) {
          this.$refs.elTable.toggleRowSelection(v)
        }
      })
      this.selectedRow = [...this.tableSelectedMap.values()]
    },
    // 数据发送
    submit() {
      this.innerVisible = false
      this.$emit('addPackage', this.selectedRow)
    },
    // 获取包件
    httpGetPackage() {
      this.httpLoading = true
      this.tableData = []
      return this.$ajax.table('/ms-warehouse-order/moveLocation/findMovePackageList', this.params).then(response => {
        this.totalItem = response.totalItem
        this.tableData = response.data
        this.tableDataMap = new Map()
        this.tableData.forEach(v => {
          this.tableDataMap.set(v.packageId, v)
        })
        return this.tableDataMap
      }).then(tableDataMap => {
        if (Array.isArray(this.value)) {
          this.$nextTick(_ => {
            // 其他选择的数据
            this.selectedRow.forEach(v => {
              if (v.packageId) {
                if (tableDataMap.has(v.packageId)) {
                  this.$refs.elTable.toggleRowSelection(tableDataMap.get(v.packageId), true)
                }
              }
            })
          })
        }
      }).finally(_ => {
        this.httpLoading = false
        this.searchLoading = false
      })
    },
    selectPage(page) {
      this.params.pageNum = page
      this.httpGetPackage()
    },
    searchFunc() {
      let search = this.search
      if (!search.locationId && !search.packageCode && !search.packageName && !search.productNo && !search.productName) {
        alert('请输入检索条件！')
        return
      }
      this.searchLoading = true
      this.params = merge(this.params, this.search)
      this.tableSelectedMap = new Map()
      this.selectedRow = []
      this.httpGetPackage()
    },
    handleSizeChange(size) {
      this.params.pageSize = size
      this.httpGetPackage()
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    }
  }
}
</script>
